<template>
	<view class="">
		<!-- 	{{submitbol}} -->
		<view class="zhsz" v-if="!submitbol">
			<!-- 户名 -->
			<view class="hm">
				<view class="hmm">
					<text><text style="color: red;">*</text>户名</text>
				</view>
				<view class="in">
					<u--input border="bottom" clearable placeholder="请输入户名" v-model="value" @change="change"></u--input>
				</view>

			</view>

			<!-- 银行 -->
			<view class="hm">
				<view class="hmm">
					<text><text style="color: red;">*</text>银行</text>
				</view>
				<view class="in">
					<u-cell-group>
						<u-cell @click="open">

							<view slot="label" :style="{color:yinh=='请选择银行'?'#bbbfc7':'#35363c',fontSize:'15px'}">
								{{yinh}}
							</view>
							<view slot="right-icon">
								<u-icon name="arrow-right"></u-icon>
							</view>
						</u-cell>

					</u-cell-group>
					<u-picker :show="show" :closeOnClickOverlay="true" :columns="columns" @cancel="close"
						@confirm="queren"></u-picker>
				</view>

			</view>


			<view class="khh" @click="khhang">
				<view class="hmm">
					<text><text style="color: red;">*</text>开户行</text>
				</view>
				<view class="in">
					<view class="le">
						<text style="color:#bbbfc7;margin-left: 21px;" v-if="!hasData">请选择开户行</text>
						<text style="color:#35363c;"
							v-else="">{{formData.province}}-{{formData.city}}-{{formData.district}}</text>

					</view>
					<view class="rig">
						<u-icon name='arrow-right'></u-icon>
					</view>



				</view>

				<selectAreaVue ref="selectArea" @getAreaData="getAreaData" :provinceName="formData.province"
					:cityName="formData.city" :countyName="formData.district"></selectAreaVue>
			</view>
			<view class="hm">
				<view class="hmm">
					<text><text style="color: red;">*</text>网点</text>
				</view>
				<view class="in">
					<u--input placeholder="请输入网点名称" border="bottom" v-model="value1" @change="change1"></u--input>
				</view>

			</view>
			<view class="hm">
				<view class="hmm">
					<text><text style="color: red;">*</text>银行账号</text>
				</view>
				<view class="in">
					<u--input placeholder="请输入银行账号" border="bottom" v-model="value2" @change="change2"></u--input>
				</view>

			</view>
			<view class="kh">
				<text><text style="color: red;">*</text>开户证明</text>

				<view class="sc">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="2"></u-upload>
					<text>资料上传</text>
				</view>
			</view>
			<view class="btn" @click="submit">
				<u-button text="确认提交" color="#f74347" shape="circle"></u-button>


			</view>

		</view>
		<view class="nopass" v-else>
			<!-- 	{{examine}}
			{{pass}} -->
			<view class="" v-if="examine=='false'">
				<view class="nopass">
					<image :src="nopass" mode=""></image>
					<text>已提交管理员审核中~</text>
				</view>
			</view>

			<view class="" v-else>
				<view class="nopass" v-if="pass=='true'">
					<image :src="nopass3" mode=""></image>
					<text>{{suggestedModifications2}}</text>
				</view>
				<view class="nopass" v-else>
					<image :src="nopass2" mode=""></image>
					<text>没有通过:{{suggestedModifications}}</text>
					<button @click="updata">点击去修改</button>
				</view>
			</view>

		</view>
	</view>

</template>

<script>
	import {
		base_Url
	} from '../../../utils/Url';
	import selectAreaVue from './selectArea/selectArea.vue';
	export default {
		components: {
			selectAreaVue
		},
		data() {
			return {
				submitbol: false,

				nopass: base_Url + "/upload/已通过.png",
				nopass3: base_Url + "/upload/已提交.png",
				nopass2: base_Url + "/upload/未通过.png",
				examine: true,
				pass: false,
				suggestedModifications2: "已通过",
				suggestedModifications: "xxxxxx",
				fileList1: [],
				formData: {
					province: '',
					city: '',
					district: '',
				},
				show: false,
				value: '',
				value1: '',
				value2: '',
				columns: [
					[
						'中国工商银行',
						'中国建设银行',
						'中国邮政储蓄银行',
						'中国农业银行',
						'北京农商银行',
						'招商银行',
					]
				],
				yinh: "请选择银行",
				id: ""
			}
		},
		computed: {
			// 计算属性，根据 formData 中是否有值来判断
			hasData() {
				return this.formData.province || this.formData.city || this.formData.district;
			}
		},
		filters: {
			avatarfilter(e) {
				console.log(e);
				return e
			}
		},
		onLoad() {
			this.getUserinfo()
		},
		onPullDownRefresh() {
			uni.redirectTo({
				url: '/pages/my/accountSettings/accountSettings'
			})
		},
		methods: {
			getUserinfo() {
				const aa = uni.getStorageSync("userinfo")
				console.log("user", JSON.parse(aa).id);
				this.$http.post('/accountSettings/queryByid', {

					userId: JSON.parse(aa).id,


				}).then(res => {
					console.log('res', res);
					uni.setStorageSync("yinh", res.result)
					this.examine = res.result.examine
					this.suggestedModifications = res.result.suggestedModifications
					this.pass = res.result.pass
					this.submitbol = true
				})
			},
			updata() {
				const aa = uni.getStorageSync("yinh")
				console.log("xinxi", aa);
				this.value = aa.accountName
				this.yinh = aa.bank
				this.value = aa.accountName
				this.formData = aa.openingBank
				this.value1 = aa.outlets
				this.value2 = aa.bankAccountNumber
				this.id = aa.id
				this.fileList1 = aa.accountOpeningCertificate.map(item => {
					return {
						...item,
						url: item.url.replace(/^http:\/\/127\.0\.0\.1:8080/, base_Url)
					}
				})
				this.submitbol = false
				// this.examine = false
			},
			change(e) {
				// console.log('change', e);
			},
			change1(e) {
				// console.log('change', e);
			},
			change2(e) {
				// console.log('change', e);
			},
			open() {
				// console.log('shiu');
				this.show = true
			},
			close() {
				this.show = false
			},
			queren(e) {
				// console.log(e.value);
				this.yinh = e.value[0]
				// console.log(this.yinh);
				this.show = false
			},
			khhang() {
				// console.log(1411);
				this.$refs.selectArea.handleOpen();
			},
			getAreaData(e) {
				this.formData.province = e.province.label;
				this.formData.city = e.city.label;
				this.formData.district = e.area.label;
				// console.log(this.formData);
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					console.log("item", item);
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						// Object.assign(item, {
						// 	status: "success",
						// 	message: "",
						// 	url: result,
						// })
						Object.assign(item, {
							...result,
							status: "success"
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: base_Url + "/common/upload", // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						formData: {
							user: "test",
						},
						success: (res) => {
							console.log("res", res);
							// setTimeout(() => {
							resolve(JSON.parse(res.data).result);
							// }, 1000);
						},
					});
				});
			},
			submit() {
				console.log("提交");
				const aa = uni.getStorageSync("userinfo")
				console.log("useri", aa);
				console.log("sss", this.fileList1);
				// const aa2 = uni.getStorageSync("yinh")
				// console.log("xinxi", aa2.accountOpeningCertificate[0].uid);
				let akk = []
				if (this.fileList1[0].type) {
					akk = this.fileList1.map(item => {
						console.log("数据", item);
						return {
							...item[0]
						}
					})
				} else {
					akk = this.fileList1
				}
				console.log("aak", akk);

				// akk = this.fileList1.map(item => {
				// 	console.log("数据", item);
				// 	return {
				// 		...item[0]
				// 	}
				// })

				// console.log(akk);
				const data = {

					userId: JSON.parse(aa).id,
					accountName: this.value,
					bank: this.yinh,
					openingBank: this.formData,
					outlets: this.value1,
					bankAccountNumber: this.value2,
					accountOpeningCertificate: akk,
					id: this.id

				}
				console.log("评价的相关", data);

				this.$http.post("/accountSettings/insert", data).then(res => {

					console.log("res", res.code);
					this.submitbol = true
					this.examine = 'false'
					if (res.code == 200) {
						this.$showMsg("成功", res)


						// this.$toPage()
					}
				})
			}



		}
	}
</script>

<style lang="scss">
	.nopass {

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 50px;

		image {
			width: 100px;
			height: 100px;
		}
	}

	.zhsz {
		// padding: 8px;

		.hm {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.hmm {
				width: 45px;
			}

			.in {
				width: 280px;
			}
		}

		.khh {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.hmm {
				width: fit-content;
			}

			.in {
				// margin: 0px 12px;
				// padding: 12px;
				width: 280px;
				display: flex;
				justify-content: space-between;

				.le {}

				.rig {
					margin-right: 5px;
				}

				text {
					// margin-left: 8px;

					font-size: 15px;
				}
			}

		}

		.kh {
			margin-top: 25px;

			.sc {
				margin: 8px;
			}

		}

		.btn {
			margin-top: 25px;
			// position: fixed;
			// bottom: 0px;
			// margin-left:50% ;
			// transform: translateX(-50%);
		}

	}
</style>